<template>
  <div class="home">
    <div>
      <h1>username: {{ myName }}</h1>
      <!-- 为什么在template中，不使用age.value这种语法呢？
      它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。
      -->
      <h3>age: {{ age }} <button type="button" @click="updateAge">update</button></h3>
    </div>
    <div>
      <h3>password: {{ password }} <button type="button" @click="modifyPwd">modifyPwd</button></h3>
    </div>
    <div>
      <h3>武当掌门： {{ user.name }} - age:{{ user.age }}- sex: {{ user.sex }}</h3>
    </div>
    <div><button type="button" @click="modifyUser">换掌门</button></div>
    <div>
      <h3>list:</h3>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
      <button type="button" @click="modifyList">push list</button>
    </div>
    <div>
      <h3>Animal: {{ objAnimal.name }}</h3>
      <ul>
        <li v-for="(item, index) in objAnimal.likes" :key="index">{{ item }}</li>
      </ul>
      <button type="button" @click="updateAnimail">updateAnimail</button>
    </div>

    <div>
      <h1>phone:</h1>
      <ul>
        <li v-for="item in phone" :key="item.id">{{ item.name }}</li>
      </ul>
      <button type="button" @click="updataPhone">updataPhone</button>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HomeView',
  data() {
    return {
      myName: 'wenqingwu'
    }
  },
  mounted() {
    console.log('age', this.age) //当通过 this 访问时也会同样如此解包。
  },
  // 组合式API：
  setup() {
    let age = ref(10)

    // vue3中使用Proxy对象来创建的响应式的变量。
    // 使用ref()创建的变量，要使用变量名.value才可以 读写变量的值。
    const updateAge = () => {
      // age++
      age.value++ // 修改age的值
      console.log(age.value) // 6 7  8 ... 获取变量的值
    }

    // 在setup选项中，每一个对象，变量，函数，方法等任何东西，都需要 return 出来。

    let password = ref('123')

    const modifyPwd = () => {
      password.value = '456'
    }

    let user = ref({
      age: 100,
      sex: '男',
      name: '张三丰'
    })

    const modifyUser = () => {
      // eslint-disable-next-line
      // 不检查下一行的语法
      // eslint-disable-next-line
      // console.log(user.value) // Proxy {age: 100, sex: '男', name: '张三丰'}
      console.log(user.value.name) // '张三丰'
      user.value.name = '张无忌'
    }

    let list = ref([1, 2, 3, 4, 5])
    const modifyList = () => {
      // ref()返回的数组，list.value对应的就是真是的数组的值。
      // eslint-disable-next-line
      console.log(list.value) // Proxy {0: 1, 1: 2, 2: 3, 3: 4, 4: 5}，通过下标来访问数组的元素。
      list.value.push(list.value.length + 1) // length可以获取到数组的长度。
      //  如果直接操作数组没有实现响应式，可以把数组保存一个对象的属性》
      //  ref({ list: [1,2,3] })
    }

    const objAnimal = reactive({
      name: '鸭子',
      likes: [1, 2, 3]
    })

    const updateAnimail = () => {
      // eslint-disable-next-line
      console.log(objAnimal) // Proxy {name: '鸭子'},做了自动的解包，不需要.value的调用。
      objAnimal.name = '小猫'
      objAnimal.likes.push('a', '鱼')
    }

    let phone = reactive([
      { id: 1, name: '5' },
      { id: 2, name: '6' },
      { id: 3, name: '7' },
      { id: 4, name: '14pro' }
    ])
    const updataPhone = () => {
      // phone.push({ id: phone.length + 1, name: 'IPHONE15' })
      phone[3].name = 'IPHONE15'
    }
    return {
      age,
      updateAge,
      password,
      modifyPwd,
      user,
      modifyUser,
      list,
      modifyList,
      objAnimal,
      updateAnimail,
      phone,
      updataPhone
    }
  }
}
</script>
